<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
        <el-form-item prop="params.memberId">
          <el-input
            v-model="queryParams.params.memberId"
            class="filter-item"
            clearable
            placeholder="会员ID"
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item prop="params.cardNo">
          <el-input
            v-model="queryParams.params.cardNo"
            class="filter-item"
            clearable
            placeholder="卡号"
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item prop="params.queryTime">
          <el-date-picker
            v-model="queryParams.params.queryTime"
            end-placeholder="充值结束时间"
            range-separator="至"
            start-placeholder="充值开始时间"
            style="width: 100%"
            type="datetimerange"
            @change="handlerQueryTimeChange"
          />
        </el-form-item>
        <!-- 按钮 -->
        <el-button
          v-permission="['/card/recharge/search']"
          v-waves
          class="filter-item"
          icon="el-icon-search"
          size="small"
          style="margin-left: 10px;"
          type="primary"
          @click="getDataList"
        >查询
        </el-button>
        <el-button
          v-permission="['/card/recharge/search']"
          v-waves
          class="filter-item"
          icon="el-icon-refresh"
          size="small"
          type="primary"
          @click="resetQueryForm"
        >重置
        </el-button>
      </el-form>
    </div>
    <!-- 数据表格 -->
    <el-table
      v-loading="dataListLoading"
      :data="dataList"
      border
      data-list
      fit
      highlight-current-row
      size="small"
      style="width: 100%;"
      @sort-change="handleSortChange"
    >
      <el-table-column :index="shownIndex" align="center" fixed label="序号" type="index" />
      <el-table-column align="center" label="卡号" prop="cardNo" show-overflow-tooltip sortable="custom" />
      <el-table-column align="center" label="会员ID" prop="memberId" show-overflow-tooltip sortable="custom" />
      <el-table-column align="center" label="充值金额" prop="rechargeAmount" show-overflow-tooltip />
      <el-table-column align="center" label="赠送金额" prop="giftAmount" show-overflow-tooltip />
      <el-table-column align="center" label="充值前余额" prop="balanceBefore" show-overflow-tooltip />
      <el-table-column align="center" label="充值后余额" prop="balanceAfter" show-overflow-tooltip sortable="custom" />
      <el-table-column align="center" label="充值类型" prop="rechargeTypeName" show-overflow-tooltip />
      <el-table-column align="center" label="充值时间" prop="rechargeDate" show-overflow-tooltip sortable="custom" />
      <el-table-column align="center" label="备注" prop="remark" show-overflow-tooltip />
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="queryParams.page"
        :page-size="queryParams.size"
        :page-sizes="[10,20,30, 50]"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>

import { fetchList } from '@/api/card/recharge'

export default {
  name: 'Recharge',
  data() {
    return {
      total: 0,
      dataList: [],
      dataListLoading: false,
      dialogLoading: false,
      rechargeVisible: false,
      dialogStatus: '',
      cardNo: '',
      dialogTitleMap: {
        add: '新增',
        update: '编辑',
        recharge: '储值卡充值'
      },
      queryParams: {
        page: 1,
        size: 10,
        params: {
          cardNo: '',
          memberId: '',
          rechargeStartDate: '',
          rechargeEndDate: '',
          queryTime: []
        }
      }
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    shownIndex(index) {
      return (this.queryParams.page - 1) * this.queryParams.size + index + 1
    },
    handleSortChange(data) {
      console.log('handleSortChange')
      console.log(data)
      if (data.order) {
        if (data.order.indexOf('asc') > -1) {
          this.queryParams.sortOrder = 'asc'
        } else {
          this.queryParams.sortOrder = 'desc'
        }
        this.queryParams.sortName = data.prop
      }
      console.log(this.queryParams)
      this.getDataList()
    },
    getDataList() {
      this.dataListLoading = false
      fetchList(this.queryParams)
        .then(res => {
          console.log(res)
          this.dataList = res.data.records
          this.total = res.data.total
          this.dataListLoading = false
        }).catch(err => {
          console.log(err)
          this.dataLoading = false
        })
    },
    resetQueryForm() {
      this.$refs['queryForm'].resetFields()
      this.queryParams.page = 1
      this.queryParams.params.rechargeStartDate = ''
      this.queryParams.params.rechargeEndDate = ''
      this.getDataList()
    },
    handleSizeChange(size) {
      this.queryParams.size = size
      this.getDataList()
    },
    handleCurrentChange(page) {
      this.queryParams.page = page
      this.getDataList()
    },
    handlerQueryTimeChange(value) {
      if (value) {
        this.queryParams.params.rechargeStartDate = value[0]
        this.queryParams.params.rechargeEndDate = value[1]
      }
    }
  }
}
</script>
<style scoped>
.el-form .el-select {
  width: 100%;
}
</style>
